<template>
	<view class="page">

		<!-- 返回样式 -->
		<view class="returnbox" @click="fanhuidata">
			<image src="../../static/fanhui.png"></image>
		</view>

		<!-- 输入订单 -->
		<view v-if="ordershow">
			<view class="order-mian">
				<view class="order-bg">

					<view class="searchbar">
						<view class="searchbar-list">
							<image style="width: 46rpx;height: 46rpx;" src="../../static/icon/searcha.png"></image>
							<input class="searchbar-input" @confirm="searchdata" v-model.trim="searchText"
								confirm-type="search" maxlength="26" type="text" placeholder-style="color:#a6a7a8;
									font-size:29rpx;" placeholder="输入订单号" />
							<!-- <image v-if="searchText" @click="empty" style="width: 33rpx;height: 33rpx;"
								src="../../static/icon/close.png"></image> -->
						</view>
					</view>

					<!-- 2 -->
					<view @click="dianjbg" class="qu-bg">
						<image src="https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/qd.png"></image>
					</view>

				</view>
			</view>

		</view>

		<!-- 视频 -->
		<view >
			<div class="right-ru">
				<view v-for="(item,index) in peoplelink" :key="index">
					<span class="right-img">
						<img :src="item" />
					</span>
				</view>
				<view class="right-num">{{peoplelink.length}}人</view>
			</div>

			<!-- 视频区域 -->
			<view class="videoarea">
				<view style="position: absolute;width: 100%;height: 100%;z-index: 99;background:red; opacity: 0;"></view>
				<view v-if="moveshow" style="position: absolute;z-index: 999;color: #ffffff;"
					:style="'left:'+left+'px;top:'+top+'px;font-size:'+size+'px;'">Ready go !</view>
			    
				<view id="videoContain" style="width: 100%;height: 100%" preload="auto" playsinline webkit-playsinline>
					<!-- <video id="player-container-id"  preload="auto" playsinline webkit-playsinline></video> -->
				</view>

            
				<!-- <view style="width: 100%;height: 1200rpx;background: red;">
					<web-view class="hide-scrollbar" src="http://85bf64d66a465343c5fb9562aa6946db.cloud.xstrive.com:9502/player/webrtc?streamPath=hlsram/live0&isMute=1&auto=1&aspect=0&hasAudio=0&username=admin&password=admin"></web-view>
				</view> -->
				<view class="operation">
					<view v-if="operationvalue" class="operationlist">
						<image src="../../static/icon/aa/playingmethod.png"></image>
						<view style="font-size: 25rpx;">规则</view>
					</view>
					<view v-if="operationvalue" class="operationlist">
						<image src="../../static/icon/aa/appeal.png"></image>
						<view style="font-size: 25rpx;">申诉</view>
					</view>
					<view v-if="operationvalue" @click="voiceat" class="operationlist">
						<image v-if="voiceavalue" src="../../static/icon/aa/openmusic.png"></image>
						<image v-else src="../../static/icon/aa/closemusic.png"></image>
						<view style="font-size: 25rpx;">静音</view>
					</view>
					<view @click="operat" class="openmethod">
						<image
							:src="operationvalue==false?'../../static/icon/aa/openoperation.png':'../../static/icon/aa/closeoperation.png'">
						</image>
					</view>
				</view>
			</view>


			<!-- 商品操作区域 -->
			<view class="grabbox">

				<!-- 开始游戏区域 -->
				<view v-if="startth==false">
					<view class="grablist">
						<view class="grab_commodity">
							<image class="grab_commodity_image"
								src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/63313ec0f0607e1ca0e46f595593f455.jpg?w=800&h=800">
							</image>
							<view class="grab_commodity_text">订单详情</view>
						</view>
						<view v-if="state == 'ready'" @click="startthegame" class="startbox">
							<!-- <view class="startext">20金币/次</view> -->
						</view>

						<view @click="appointment" v-if="state == 'await'" class="startboxyyu">
							<!-- <view class="startext">20金币/次</view> -->
						</view>


						<view class="currency">
							<image class="currency_image" src="../../static/icon/aa/coins.png"></image>
							<view class="currency_num">23</view>
						</view>
					</view>
					<view class="grabtextlist flex ac">
						<view style="font-size: 27rpx;">可兑 0 积分</view>
						<view style="font-size: 27rpx;">畅玩卡: 1张</view>
						<view class="flex ac">
							<view class="zhao">甩爪</view>
							<view style="font-size: 27rpx;">NO:P1036</view>
						</view>
					</view>
					<view v-if="stateShow" class="calculate">{{countdownTime}}</view>
				</view>
				<!-- 遥控游戏区域 -->
				<view v-if="startth==true">
					<view class="controlbox">
						<view class="controw">
							<view @touchstart="handleTouchStart('left')" @touchend="handleTouchEnd('stop','left')">
								<!-- :class="Opacityvalue==1?'clawsa-image':'clawsa-image-art'" -->
								<!-- <image src="../../static/icon/aa/left.png"></image> -->
								<image
									:src="leftimg == true?'https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/left.png':'https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/a-left.png' ">
								</image>
							</view>
							<view style="width: 140rpx;height:100rpx;"></view>
							<view @touchstart="handleTouchStart('right')" @touchend="handleTouchEnd('stop','right')">
								<!-- <image src="../../static/icon/aa/right.png"></image> -->
								<image
									:src="rightimg == true?'https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/right.png':'https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/a-right.png' ">
								</image>
							</view>
						</view>
						<view class="contcolumn">
							<view @touchstart="handleTouchStart('top')" @touchend="handleTouchEnd('stop','top')">
								<!-- <image src="../../static/icon/aa/top.png"></image> -->
								<image
									:src="topimg == true?'https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/top.png':'https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/a-top.png' ">
								</image>
							</view>
							<view style="width: 100rpx;height:80rpx;"></view>
							<view @touchstart="handleTouchStart('down')" @touchend="handleTouchEnd('stop','down')">
								<!-- <image src="../../static/icon/aa/bottom.png"></image> -->
								<image
									:src="downimg == true?'https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/bottom.png':'https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/a-bottom.png' ">
								</image>
							</view>
						</view>
						<view @click="controgo" class="controgo">
							<image src="https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/go.png"></image>
							<view style="position: absolute;bottom: 20rpx;left: 76rpx;color: #ffffff;font-size: 22rpx;">
								{{grabTime}}s
							</view>
						</view>

					</view>
					<view class="controllist flex ac">
						<view class="flex ac">
							<view class="zhao">甩爪</view>
							<view style="font-size: 27rpx;color: #86878D;">NO:P1036</view>
						</view>
						<view class="contronum">
							<image class="contronumleft" src="../../static/icon/aa/jingbi.png"></image>
							<view style="font-size: 27rpx;">10币</view>
							<image class="contronumright" src="../../static/icon/aa/jia.png"></image>
						</view>
					</view>

				</view>

				<!-- 等待结果 -->
				<view v-if="results">
					<view class="grablist" style="font-size: 36rpx;text-align: center;display: block;">
						游戏结果获取中...
					</view>


				</view>



			</view>

  	
			<!-- 弹框  -->
			<view v-if="grabshow" class="custom-modal">
				
				<view v-if="grabshowcheng" style="width: 70%;height: 700rpx;margin: 0 auto;margin-top: 250rpx;">
					<image style="width: 100%;height: 100%;" src="https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/show22.png"></image>
				</view>
				<view v-else style="width: 70%;height: 700rpx;margin: 0 auto;margin-top: 250rpx;">
					<image style="width: 100%;height: 100%;" src="https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/show11.png"></image>
				</view>
				
				
				<!-- <view v-if="grabshowcheng" style="width: 200rpx;height: 100rpx;margin: 0 auto;margin-top: 500rpx;">
					<view style="font-size: 50rpx;color: #ffffff;">抓中成功</view>
				</view>
				<view v-else style="width: 200rpx;height: 100rpx;margin: 0 auto;margin-top: 500rpx;">
					<image style="width: 100%;height: 100%;" src="https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/show1.png"></image>
				</view>
				<view style="width: 300rpx;height: 300rpx;margin: 0 auto;">
					<image style="width: 100%;height: 100%;" src="../../static/show2.png"></image>
				</view> -->
				<view class="btns-main">
					<view @tap="giveup" class="btns" style="background: #C5C5C5;">放弃抓取</view>
					<view @tap="continuingGame" class="btns" style="background: #0DEB94;">继续游戏({{grabTime}})</view>
				</view>

			</view>
			<audio :src="audiosrc" id="myAudio" crossorigin="anonymous"></audio>
			<audio src="https://duimianimg.loovee.com/style/js/h5/audio/Rainbows_01_01.mp3" crossorigin="anonymous" id="BuAudio" :autoplay="true" loop="true" @ended="onEnded"></audio>
			
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	
	export default {
		data() {
			return {
				ordershow:true,
				searchText:"",
				audiosrc: 'https://duimianimg.loovee.com/style/js/ukaka_audio/operate.mp3',
				isPlaying: false,
				peoplelink: [],
				moveshow: false,
				left: 170,
				top: 110,
				size: 12,
				startth: false,
				results: false,
				voiceavalue: true,
				operationvalue: false,
				commodity_id: '',
				token: '',
				name: '',
				state: 'ready',
				stateShow: false,
				countdowntimerdata: null, //心跳
				countdownTime: 3, //倒计时
				grabtimerdata: null, //点击心跳
				grabTime: 30, //点击倒计时
				movedata: null, //移动点击心跳
				moveTime: 30, //移动点击倒计时
				grabdata: null, //抓取点击心跳
				grabTime: 30, //抓取点击倒计时
				grabshow: false, //弹框抓状态
				grabshowcheng: false, //是否抓状态

				audioContext: null,
				audioBuAudio:null,

				leftimg: true,
				rightimg: true,
				topimg: true,
				downimg: true,

			}
		},
		onLoad(option) {
			console.log('参数1:', option); // 输出 value1
			this.commodity_id = option.id
			// this.getmachine()
            document.addEventListener('touchmove', this.preventTouchMove, { passive: false });
		},
		 onUnload() {
		    // 页面卸载时移除事件监听
		    document.removeEventListener('touchmove', this.preventTouchMove, { passive: false });
		  },
		mounted() {
			this.tcpalyer();
			this.connectSocket()
			this.audioContext = uni.createAudioContext('myAudio')
			this.audioBuAudio = uni.createAudioContext('BuAudio')
			
		},
		methods: {
			preventTouchMove(event) {
			      // 阻止默认的下拉行为
			      event.preventDefault();
			    },
			dianjbg(e){
				uni.showLoading({
				    title: '加载中'
				});
				const video = document.querySelector('video');
				video && video.play();
				this.audioBuAudio.play()
				      // 模拟加载数据的操作（示例）
				      setTimeout(() => {
				        // 数据加载完成后隐藏加载动画
				        this.loading = false; 
						this.ordershow = false
						console.log(this.searchText)
						
						uni.hideLoading();
				      }, 2000);
			}, 
			onEnded(event) {
			      // 当音频播放结束时，重新播放
			      event.target.play();
			    },
			async getmachine(e) {
				let apply = await request(`${getApp().globalData.http}commodity/get_machine`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					commodity_id: this.commodity_id,
				})
				if (apply.data.code == 0) {
					console.log('哇哇》》', apply.data.data)
					this.count = apply.data.data[0].count
					this.name = apply.data.data[0].name
					this.connectSocket()
				} else {
					uni.showToast({
						title: `${apply.data.message}`,
						icon: "none",
					})
				}
			},
			handleTouchEnd(text, sut) {
				// 松开事件处理
				console.log('松开事件处理', text);
				let data = {
					'direction': text
				}
				var that = this
				if (sut == 'left') {
					this.leftimg = true
				} else if (sut == 'right') {
					this.rightimg = true
				} else if (sut == 'top') {
					this.topimg = true
				} else if (sut == 'down') {
					this.downimg = true
				}
				that.audioContext.currentTime = 0;
				// that.audioContext.play()
				// that.isPlaying = false

				setTimeout(() => {

					that.sendSocketMessage(JSON.stringify(data))

				}, 100);


			},
			handleTouchStart(text) {
				console.log('按下事件处理', text);
				let data = {
					'direction': text
				}

				//  const audio = uni.createInnerAudioContext();
				//  console.log('>>>>>>',audio)
				// audio.play();
				//       audio.onPlay(() => {
				//         console.log('开始播放');
				//       });
				var that = this

				if (text == 'left') {
					this.leftimg = false
				} else if (text == 'right') {
					this.rightimg = false
				} else if (text == 'top') {
					this.topimg = false
				} else if (text == 'down') {
					this.downimg = false
				}

				that.audiosrc = "https://duimianimg.loovee.com/style/js/ukaka_audio/operate.mp3"

				// that.audioContext.play()
				// setTimeout(() => {
				that.audioContext.currentTime = 0;
				that.audioContext.play()
				console.log('>>>>>>',that.audioContext)
				that.isPlaying = true
				// }, 50);

				that.sendSocketMessage(JSON.stringify(data))




			},
			// 抓娃娃
			controgo(e) {
				var data = {
					'direction': "catch",
				}
				var that = this
				that.audiosrc = "https://duimianimg.loovee.com/style/js/h5/audio/xiazhua.mp3"
				setTimeout(() => {

					that.audioContext.play()
				}, 100);
				that.sendSocketMessage(JSON.stringify(data))
				clearInterval(that.grabtimerdata);
			},
			// 继续游戏
			continuingGame(e) {

				var that = this
				that.left = 170
				that.top = 110
				that.size = 12

				that.grabshow = false //弹框
				that.grabshowcheng = false //弹框里面是否抓中
				let data = {}
				let datas = {}
				// 链接娃娃机
				data = {
					'direction': "connect",
				}

				// this.startth = true
				that.audiosrc = "https://duimianimg.loovee.com/style/js/h5/audio/readygo.mp3"
				setTimeout(() => {
					that.audioContext.play()
					// 这里写你需要延时一秒后执行的代码
					that.sendSocketMessage(JSON.stringify(data))
					that.stateShow = true
					that.turnCountdown()

					// that.sendMessage(JSON.stringify(datas))
				}, 1000);






			},
			// 预约
			appointment(e) {
				var data = {
					'direction': "appointment",
				}
				this.sendSocketMessage(JSON.stringify(data))
			},
			//开始游戏
			startthegame(e) {
				var that = this
				let data = {}
				let datas = {}
				// 链接娃娃机
				data = {
					'direction': "connect",
				}

				// this.startth = true


				that.audiosrc = "https://duimianimg.loovee.com/style/js/h5/audio/readygo.mp3"

				that.turnCountdown()
				setTimeout(() => {
					that.audioContext.play()
					// 这里写你需要延时一秒后执行的代码
					that.sendSocketMessage(JSON.stringify(data))
					that.stateShow = true


					// that.sendMessage(JSON.stringify(datas))
				}, 1000);


				//    // 游戏开始
				// setTimeout(() => {
				// 		        // 这里写你需要延时一秒后执行的代码
				// let datas = {
				// 		'direction':"start",
				// 	}
				// 	console.log(datas)

				// 	// that.sendMessage(JSON.stringify(datas))
				// }, 1000);
				// // 游戏开始2
				// setTimeout(() => {
				// 		        // 这里写你需要延时一秒后执行的代码
				// let datass = {
				// 		'direction':"start",
				// 	}
				// 	console.log(datass)
				// 	// that.sendMessage(JSON.stringify(datass))
				// }, 2000);
				//   console.log(data) 

				// that.sendMessage(JSON.stringify(data))

			},


			//连接websocket
			connectSocket() {
				let that = this;
				console.log('调用连接websocket')
				var token = getApp().globalData.token
				this.socketTask = uni.connectSocket({

						// url: 'ws://120.55.52.136:9090/ws/connect/TestConsumer',
						// url: 'ws://120.55.52.136:9090/ws/connect/user/'+that.uid+'/',
						// url: 'ws://120.55.52.136:9090/ws/user/XlclZ1ZVUU4xX3VzZXI=/4/t001/',

                         // https://www.gdruiduo.com/doll/
						// url:'ws://120.55.52.136:9090/ws/user/Nm55TEZxXzE3MTg1MTk0MzhfMQ/71/t001/',
						// url: 'ws://120.55.52.136:9090/ws/user/'+token+'/'+this.commodity_id+'/'+this.name+'/',//正式
						// url: 'ws://112.124.57.249:9090/ws/user/' + token + '/t001/', //正式
						url: 'ws://www.gdruiduo.com/ws/user/' + token + '/t001/', //正式

						header: {
							Authorization: 2,
						},
						success(res) {

							that.heart()
							console.log("websocket连接成功");
							// that.isSuccess = true
						},
						fail(err) {
							console.log("报错", err);
						}
					},


				);

				that.socketTask.onMessage(function(res) {
					var data = JSON.parse(res.data)

					// console.log('2收到服务器内容：' ,typeof data);
					// console.log('3收到服务器内容' ,data);
					if (data.code == '0') {

						that.state = data.message
						console.log('返回数据》》》', that.state)
						if (data.message == '连接成功') {
							let datas = {
								'direction': "start",
							}
							console.log(datas)
							that.sendSocketMessage(JSON.stringify(datas))
							// setTimeout(() => {
							// 		        // 这里写你需要延时一秒后执行的代码
							// let datas = {
							// 		'direction':"start",
							// 	}
							// 	console.log(datas)

							// 	// that.sendMessage(JSON.stringify(datas))
							// }, 1000);
							// 游戏开始2
							setTimeout(() => {
								// 这里写你需要延时一秒后执行的代码
								let datass = {
									'direction': "start",
								}
								console.log(datass)
								that.sendSocketMessage(JSON.stringify(datass))
							}, 2000);

						} else if (data.message == 'start') {
							// 已经开启游戏中
							that.startth = true
							clearInterval(that.grabtimerdata) //30秒抓
							that.grab()

						} else if (data.message == '游戏开始') {
							// 已经开启游戏中
							that.startth = true
							that.grab()
						} else if (data.message == '你已开始游戏，请勿重复开始') {
							// 已经开启游戏中
							that.startth = true
						} else if (data.message == '游戏结束清重新开始') {
							// 游戏结束清重新开始



							that.results = true
							that.startth = '888888'
							setTimeout(() => {

								that.results = false
								that.startth = false
								that.state = 'ready'
								that.grabResults() //弹
							}, 2000);
						} else if (data.message == '恭喜成功抓中') {
							that.grabshowcheng = true //弹框里面是否抓中
							// 游戏结束清重新开始
							// that.startth = false
							// that.results = true
							// setTimeout(() => {
							// 	that.results = false
							// 	that.state = 'ready'
							// }, 2000);

						}


						// if(data.message == 'ready'){
						// 	// that.socketTask.close()
						// 	// 防止重复获取
						// 	if (that.codeTime > 0) {
						// 		return
						// 	}
						// 	// 倒计时
						// 	that.codeTime = 10
						// 	// 箭头函数可以直接拿到外面的this的内容
						// 	that.timer = setInterval(() => {
						// 		if (that.codeTime >= 1) {
						// 			that.codeTime--
						// 			that.codeTime = that.codeTime
						// 			console.log('倒计时1',that.codeTime)
						// 		} else {
						// 			that.socketTask.close()
						// 			console.log('倒计时2')
						// 			clearInterval(that.timer)
						// 		}
						// 	}, 1000)
						// }else if(data.message == '游戏结束清重新开始'){
						// 	that.socketTask.close()
						// }


					} else if (data.code == '-2') {
						that.grabshow = false

						clearInterval(that.grabdata)
						uni.closeSocket({
							success() {
								console.log("手动关闭成功！");
								// clearInterval(Time) //关闭定时器
								// clearInterval(XTime) //关闭心跳定时器
								// // 确保已经关闭
								// socketTask = null;
							}
						})
						that.connectSocket()
						that.moveshow = false
						that.left = 170
						that.top = 110
						that.size = 12
					} else if (data.code == '8') {
						console.log('头像》》》', data.data)
						// that.peoplelink = data.data
						let obj = data.data
						let keys = Object.keys(data.data);
						let arr = []
						// 使用for循环遍历键数组，并获取每个key的值
						for (let i = 0; i < keys.length; i++) {
							let key = keys[i];
							let value = obj[key];
							arr.push(value)
							console.log(value);
						}
						that.peoplelink = arr

					} else if (data.code == '-1') {
						if (data.message == '重复发起连接，请重新连接') {
							that.connectSocket()
						}
					}
					// that.handlerMsg(JSON.parse(res.data)) //这里是对获取到的数据进行操作
				});


			},

			//发送消息
			sendSocketMessage(msg) {
				console.log('发送信息')

				console.log(msg)
				let that = this;
				return new Promise((reslove, reject) => {
					that.socketTask.send({
						data: msg,
						success(res) {
							console.log('发送成功')
							reslove(res)
						},
						fail(res) {
							console.log('发送失败')
							// that.connectSocket()//连接websocket
							console.log(res)
							// reject(res)
						}
					});
				})

			},
			//打开或者关闭操作
			operat(e) {
				this.operationvalue = !this.operationvalue
			},

			//打开或者关闭声音
			voiceat(e) {
				
				if(this.voiceavalue){
					this.audioBuAudio.pause()
					
				}else{
					this.audioBuAudio.play()
					
				}
				this.voiceavalue = !this.voiceavalue
				
			},



			//返回
			fanhuidata(e) {
				uni.navigateBack()
				uni.closeSocket({
					success() {
						console.log("手动关闭成功！");
						// clearInterval(Time) //关闭定时器
						// clearInterval(XTime) //关闭心跳定时器
						// // 确保已经关闭
						// socketTask = null;
					}
				})
				// clearInterval(this.timer)
				clearInterval(this.xintimer)
				clearInterval(this.grabtimerdata);
				this.codeTime = 0;
				this.timer = null
				this.xintimer = null
			},
			//返回上个页面关闭ws
			destroyCountdown() {
				uni.closeSocket({
					success() {
						console.log("手动关闭成功！");
						// clearInterval(Time) //关闭定时器
						// clearInterval(XTime) //关闭心跳定时器
						// // 确保已经关闭
						// socketTask = null;
					}
				})
				// clearInterval(this.timer)
				clearInterval(this.xintimer)
				clearInterval(this.grabtimerdata);
				this.codeTime = 0;
				this.timer = null
				this.xintimer = null
			},
			// 放弃
			giveup() {
				uni.closeSocket({
					success() {
						console.log("手动关闭成功！");
						// clearInterval(Time) //关闭定时器
						// clearInterval(XTime) //关闭心跳定时器
						// // 确保已经关闭
						// socketTask = null;
					}
				})
				// clearInterval(this.timer)
				clearInterval(this.xintimer)
				clearInterval(this.grabtimerdata);
				this.codeTime = 0;
				this.timer = null
				this.xintimer = null
				console.log('倒计时2')
				this.grabshow = false
				this.grabshowcheng = false //弹框里面是否抓中

				clearInterval(this.grabdata)
				uni.closeSocket({
					success() {
						console.log("手动关闭成功！");
						// clearInterval(Time) //关闭定时器
						// clearInterval(XTime) //关闭心跳定时器
						// // 确保已经关闭
						// socketTask = null;
					}
				})
				this.connectSocket()
				this.moveshow = false
				this.left = 170
				this.top = 110
				this.size = 12
			},
			// 开启倒计时
			turnCountdown() {
				// countdowntimerdata:null,//心跳
				// countdownTime: 0, //倒计时
				let that = this;
				clearInterval(that.countdowntimerdata);
				that.countdowntimerdata = '';
				that.countdownTime = 3
				let msg = {
					"direction": "active",
				}
				that.countdowntimerdata = setInterval(() => {

					console.log(that.countdownTime)
					if (that.countdownTime >= 1) {
						that.countdownTime--
						that.countdownTime = that.countdownTime
						console.log('倒计时1', that.countdownTime)
					} else {
						that.stateShow = false
						console.log('倒计时2')
						that.moveshow = true
						that.movedatas()
						clearInterval(that.countdowntimerdata)
					}
					// if(that.countdownTime =3){
					// 	clearInterval(that.countdowntimerdata);
					// }
				}, 1000)
			},

			// 点击抓
			grab() {
				let that = this;
				clearInterval(that.grabtimerdata);
				that.grabtimerdata = '';
				that.grabTime = 30
				that.grabtimerdata = setInterval(() => {

					console.log(that.grabTime)
					if (that.grabTime >= 1) {
						that.grabTime--
						that.grabTime = that.grabTime
						console.log('倒计时1', that.grabTime)
					} else {

						var data = {
							'direction': "catch",
						}
						that.audiosrc = "https://duimianimg.loovee.com/style/js/h5/audio/xiazhua.mp3"
						setTimeout(() => {

							that.audioContext.play()
						}, 100);
						that.sendSocketMessage(JSON.stringify(data))
						console.log('点击抓倒计时2')
						setTimeout(() => {
							clearInterval(that.grabtimerdata)
						}, 1000);

					}
				}, 1000)
			},

			// 移动文字
			movedatas() {
				let that = this;
				clearInterval(that.movedata);
				that.movedata = '';
				that.moveTime = 30
				that.movedata = setInterval(() => {

					console.log(that.moveTime)
					if (that.moveTime >= 1) {
						that.left = that.left - 2
						that.top = that.top + 6
						that.size = that.size + 1

						that.moveTime--
						that.moveTime = that.moveTime
						console.log('倒计时1', that.moveTime)
					} else {
						console.log('倒计时2')

						that.moveshow = false
						that.left = 170
						that.top = 110
						that.size = 12

						clearInterval(that.movedata)
					}
				}, 50)
			},

			// 抓取结果倒计时
			grabResults() {
				let that = this;
				clearInterval(that.grabdata);
				that.grabdata = '';
				that.grabTime = 10
				that.grabshow = true
				that.grabdata = setInterval(() => {

					console.log(that.grabTime)
					if (that.grabTime >= 1) {
						that.grabTime--
						that.grabTime = that.grabTime
						console.log('倒计时1', that.grabTime)
					} else {

						console.log('倒计时2')
						that.grabshow = false

						clearInterval(that.grabdata)
						uni.closeSocket({
							success() {
								console.log("手动关闭成功！");
								// clearInterval(Time) //关闭定时器
								// clearInterval(XTime) //关闭心跳定时器
								// // 确保已经关闭
								// socketTask = null;
							}
						})
						that.connectSocket()
						that.moveshow = false
						that.left = 170
						that.top = 110
						that.size = 12
					}
				}, 1000)
			},
			tcpalyer() {
				// sdk引入有顺序
				// let script1 = document.createElement("script");
				// script1.type = "text/javascript";
				// script1.src =
				// "https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js";
				// document.getElementsByTagName("head")[0].appendChild(script1);
				// 创建script标签，引入外部文件
				let script = document.createElement("script");
				script.type = "text/javascript";
				script.src =
					"https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js";
				document.getElementsByTagName("head")[0].appendChild(script);
                const video = document.createElement("video")
				
				video.setAttribute("id", "player-container-id")
				video.setAttribute('playsinline', true)

				video.setAttribute('webkit-playsinline', true)
				video.setAttribute('muted', true)
				video.setAttribute('autoplay', true)

				video.setAttribute('webkit-playsinline', true) // video的属性

				document.getElementById("videoContain").appendChild(video)





				// 引入成功
				script.onload = function() {
					console.log("js资源加载成功了");
					var player = TCPlayer('player-container-id', {
						sources: [{
							src: 'webrtc://www.gdzhuizi.com/live/85bf64d66a465343c5fb9562aa6946dbLive0', // 播放地址
						}],
						licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1258173912_1/v_cube.license', // license 地址，参考准备工作部分，在视立方控制台申请 license 后可获得 licenseUrl
					});

					// 微信
					// document.addEventListener(
					// 	'WeixinJSBridgeReady',
					// 	function() {
					// 		const video = document.querySelector('video');
					// 		video && video.play();
					// 	},
					// 	false,
					// );

					// video.addEventListener('loadeddata', function() {
					// 	// 当视频加载完成后，自动播放
					// 	video.play();
					// });
				};



				// 引入失败
				script.onerror = function() {
					console.log("js资源加载失败了");
				};
			},
			//心跳
			heart() {
				let that = this;
				clearInterval(this.xintimer);
				this.xintimer = '';
				let msg = {
					"direction": "active",
				}
				this.xintimer = setInterval(() => {
					that.sendSocketMessage(JSON.stringify(msg)).then(res => {
						console.log('心跳成功')
					}).catch(res => {
						console.log('发送失败')
						console.log((res))
					})

				}, 6000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url('https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');

	page {
		width: 100%;
		height: 100%;
		background-color: #f7f8fa;
		display: flex;
		flex-flow: column;
		overflow: hidden;
	}

	* {
		-webkit-touch-callout: none;
		/*系统默认菜单被禁用*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-khtml-user-select: none;
		/*早期浏览器*/
		-moz-user-select: none;
		/*火狐*/
		-ms-user-select: none;
		/*IE10*/
		user-select: none;
	}

	input {
		-webkit-user-select: auto;
		/*webkit浏览器*/
	}

	textarea {
		-webkit-user-select: auto;
		/*webkit浏览器*/
	}

	img {
		pointer-events: none;
	}

	input,
	textarea {
		-webkit-user-select: auto;
		/*webkit浏览器*/
		margin: 0px;
		padding: 0px;
		outline: none;
	}

	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: column;
		overflow: hidden;
	}

	//返回样式
	.returnbox {
		width: 88rpx;
		height: 88rpx;
		position: fixed;
		top: 25rpx;
		left: 20rpx;
		z-index: 999;
	}

	.returnbox image {
		width: 100%;
		height: 100%;
	}

	// 视频区域
	.videoarea {
		// width: 100%;
		// height: 83vh;
		// flex: 1;
		overflow: scroll;
		width: 100%;
		background-color: red;
		position: relative;
	}

	.operation {
		width: 85rpx;
		background: rgba(0, 0, 0, 0.45);
		position: absolute;
		bottom: 100rpx;
		right: 20rpx;
		border-radius: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 18rpx 0;
		z-index:999999;
	}

	.openmethod {
		width: 85rpx;
		display: flex;
		justify-content: center;
	}

	.openmethod image {
		width: 56rpx;
		height: 56rpx;
	}

	.operationlist {
		width: 85rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		color: #ffffff;
		margin-bottom: 15rpx;
	}

	.operationlist image {
		width: 67rpx;
		height: 67rpx;
	}

	//商品操作区域
	.grabbox {
		width: 100%;
		height: 230rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #ffffff;
	}

	//开始游戏区域
	.grablist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 35rpx;
	}

	.grab_commodity {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		position: relative;
	}

	.grab_commodity_image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.grab_commodity_text {
		width: 100%;
		height: 39rpx;
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 0;
		bottom: 0;
		font-size: 23rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0 0 20rpx 20rpx;
	}

	.startbox {
		width: 350rpx;
		height: 120rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url('https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/startthegame.png');
	}

	.startboxyyu {
		width: 350rpx;
		height: 120rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-image: url('../../static/icon/aa/yys.png');
	}

	.startext {
		font-size: 27rpx;
		color: #ffffff;
		text-align: center;
		margin-top: 70rpx;
	}

	.currency {
		width: 120rpx;
		height: 120rpx;
		background-color: rgba(1, 1, 1, 0.3);
		// background-color: #4CE52E;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
	}

	.currency_image {
		width: 80rpx;
		height: 80rpx;
	}

	.currency_num {
		font-size: 26rpx;
		color: #ffffff;
		margin-top: -20rpx;
	}

	.grabtextlist {
		padding: 20rpx 20rpx 0 20rpx;
		justify-content: space-between;
		color: #86878D;
	}

	.zhao {
		background-image: linear-gradient(270deg, #FF6144 0%, #FF99C9 100%);
		color: #ffffff;
		font-size: 23rpx;
		padding: 2rpx 5rpx;
		border-radius: 5rpx;
		margin-right: 5rpx;
	}


	// 遥控游戏区域
	.controlbox {
		width: 100%;
		height: 200rpx;
		position: relative;
		margin-top: -170rpx;
	}

	.controw {
		position: absolute;
		left: 50rpx;
		top: 50rpx;
		display: flex;
		align-items: center;
		z-index: 9999;
	}

	.controw image {
		width: 130rpx;
		height: 130rpx;
	}

	.contcolumn {
		position: absolute;
		left: 180rpx;
		top: -70rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 9999;
	}

	.contcolumn image {
		width: 130rpx;
		height: 130rpx;
	}

	.controgo {
		position: absolute;
		right: 50rpx;
		top: 35rpx;
		width: 180rpx;
		height: 150rpx;
		z-index: 9999;
	}

	.controgo image {
		width: 100%;
		height: 100%;
	}

	.controllist {
		width: 100%;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 0;
		bottom: 20rpx;
		padding: 0 20rpx;
	}

	.contronum {
		height: 50rpx;
		background-color: rgb(134, 135, 141);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// position: absolute;
	}

	.contronumleft {
		width: 50rpx;
		height: 50rpx;
		margin-right: 10rpx;
	}

	.contronumright {
		width: 35rpx;
		height: 35rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	// 倒计时
	.calculate {
		width: 100rpx;
		height: 100rpx;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 199;
		position: absolute;
		top: 30%;
		left: 42%;
		border-radius: 50%;
		text-align: center;
		line-height: 100rpx;
		font-size: 50rpx;
		color: #ffffff;
	}

	.custom-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);

		z-index: 9999;
	}


	// 弹
	.btns-main {
		display: flex;
		// justify-content: center;
		align-items: center;
	}

	.btns {
		width: 230rpx;
		height: 70rpx;
		margin-left: 100rpx;
		margin-top: 50rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 26rpx;
	}

	// 人数
	.right-ru {
		/* 	width: 2rem;
		height: 0.8rem; */

		display: -webkit-box;
		display: -webkit-flex;
		display: flex;

		padding: 5rpx 15rpx;


		position: absolute;
		z-index: 99;
		right: 30rpx;
		top: 30rpx;
		background: rgba(0, 0, 0, .45);
		border-radius: 25rpx;
	}

	.right-box {
		margin-top: 10rpx;
		width: auto;
	}

	.right-img {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;

	}

	.right-img img {
		width: 100%;
		height: 100%;
	}

	.right-num {
		text-align: center;
		color: #ffffff;
		font-size: 22rpx;
		margin-top: 15rpx;
		margin-left: 10rpx;
	}



	.ac {
		align-items: center;
	}

	.flex {
		display: flex;
	}



	/* 针对H5端隐藏滚动条 */
	.hide-scrollbar {
		overflow: hidden;
		/* 隐藏滚动条 */
		scrollbar-width: none;
		/* 对于Firefox */
	}


	// 输入订单
	.order-mian {
		background: #15288e;
		width: 100%;
		height: 100vh;
	}

	.order-bg {
		width: 100%;
		height: 100%;
		background: url('https://ruiduo-catch-doll.oss-cn-guangzhou.aliyuncs.com/DYwawaj/wawa.png');
		// position: absolute;
		top: 0rpx;
		// right: 20rpx;
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	/* 搜索区域 */
	.searchbar {
		position: absolute;
		top: 300rpx;
		left: 20%;
		// display: flex;
		// align-items: center;

		// justify-content: space-between;
		width: 60%;
	}

	.searchbar-list {
		width: 100%;
		height: 80rpx;
		background-color: #efefef;
		border-radius: 50px;
		overflow: hidden;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		border: 1px solid #09deff;
	}

	.searchbar-input {
		height: 100%;
		padding-left: 6rpx;
		flex: 1;
	}
	.qu-bg{
		width:200rpx;
		height:200rpx;
		position: absolute;
		top: 720rpx;
		left: 38%;
		animation: name 2s ease infinite;
	}
	
	@keyframes name{
					 0% {transform: scale(1);}
					 50% {transform: scale(1.25);}
					 100% {transform: scale(1)}
		}

	.qu-bg image{
		width:100%;
		height:100%;
	}
</style>